<template>
  <van-form @submit="submitBuy">
    <van-field autocomplete="off"
      type="digit"
      v-model="buyCount"
      name="buyCount"
      label="买入数量"
      :placeholder="'买入量, 最大值为: '+ needStockObj.amount"
      :rules="[{ required: true, message: '请填写买入股份的数量' }]"
    >
      <template #button>
        <van-button size="small" native-type="button">股</van-button>
      </template>
    </van-field>
    <van-field autocomplete="off"
      type="number"
      v-model="buyPrice"
      name="buyPrice"
      label="买入价格"
      placeholder="请输入买入的价格(必填)"
      :rules="[{ required: true, message: '请填写买入的价格, 最多保留三位小数！' }]"
      center
      clearable
      disabled
    >
      <template #button>
        <van-button size="small" native-type="button">￥ / 股</van-button>
      </template>
    </van-field>
    <van-field autocomplete="off"
      v-model="computedTotalPrice"
      name="buyTotalPrice"
      label="合计金额"
      placeholder="自动计算中..."
      :rules="[{ required: true, message: '请填写合计' }]"
      disabled
    >
      <template #button>
        <van-button size="small" native-type="button">￥</van-button>
      </template>
    </van-field>
    <van-field autocomplete="off"
      v-model="tradePassword"
      type="password"
      name="tradePassword"
      label="支付密码"
      placeholder="请输入支付密码(必填)"
      :rules="[{ required: true, message: '请填写支付密码' }]"
    />

    <DebounceSubmitBtn :isSubmitBtnDisabled="isSubmitBtnDisabled" text-name="确定买入" />

  </van-form>
</template>

<script>
  import DebounceSubmitBtn from "./DebounceSubmitBtn";
  import {mixin_btnStatus} from "../mixin/mixin_btn";
  import {Toast} from 'vant';
  export default {
    name: 'comBuyStock',
    props: ['needStockObj'],
    mixins: [mixin_btnStatus],
    components: {
      DebounceSubmitBtn
    },
    data(){
      return {
        // 买入
        buyCount: '',
        buyPrice:  (this.needStockObj.price /1000).toFixed(3),
        buyTotalPrice: '',
        // 交易密码
        tradePassword: '',
      }
    },
    computed: {
      computedTotalPrice(){
        let res
        if (this.buyCount && this.buyPrice){
          res = (this.buyCount * this.buyPrice).toFixed(3)
        } else{
          res = ''
        }
        return res
      },
    },
    methods:{
      // 买入
      submitBuy(values){
        const { buyCount } =values
        if (buyCount*1 > this.needStockObj.amount*1){
          Toast(`输入的买入数量不合法， 最大值为${this.needStockObj.amount}`)
        } else if (buyCount <= 0){
          Toast('输入的买入数量值不合法， 必须大于0')
        } else {
          this._updateSubmitBtnStatus();
          const needData = {
            id: this.needStockObj.id,
            amount: buyCount,
            paypassword: this.$Base64.encode( this.$md5(values.tradePassword) + this.$md5('jinpin888') ) ,
          }
          // 子组件调用父组件的方法， 并给父组件传递数据
          this.$emit("getBuyParam", needData)
        }
      },
    },
  }
</script>

<style scoped>

</style>
